<template>
  <popup-select
    :value="value"
    @update:value="(v) => emit('update:value', v)"
    :columns="[
      { title: () => t('功能名称'), dataIndex: 'functionName' },
      { title: () => t('功能编码'), dataIndex: 'functionCode' },
      { title: () => t('功能图标'), dataIndex: 'functionIcon' },
      { title: () => t('国际化名称'), dataIndex: 'localeKey' },
    ]"
    :placeholder="t('请选择功能')"
    :width="800"
    :field-names="{ label: 'functionName', value: 'functionId' }"
    :query-by-id="(queryByIds as PopupSelectProps['queryById'])"
    :query-by-page="queryByPage"
    :default-params="{
      functionStatus: 'Y',
    }"
    :size="size"
    :multiple="multiple"
    @bring="(v, r) => emit('bring', v, r)"
  >
    <template #search-form="{ params }">
      <a-col :span="8">
        <a-form-item :label="t('功能名称')">
          <a-input
            v-model:value="params.functionName"
            :placeholder="t('请输入功能名称')"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('功能编码')">
          <a-input
            v-model:value="params.functionCode"
            :placeholder="t('请输入功能编码')"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-col>
    </template>
    <template #bodyCell="{ column, text }">
      <component
        v-if="column.dataIndex == 'functionIcon'"
        style="font-size: 20px"
        :is="text"
      />
    </template>
  </popup-select>
</template>
<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { queryByPage, queryByIds } from "@/api/system/function";
import type { SizeType } from "@/typing";
import type { PopupSelectProps } from "../popup-select/typing";
import PopupSelect from "@/components/popup-select/index.vue";
interface Props {
  /**绑定值 */
  value: string | string[];
  /**多选 */
  multiple?: boolean;
  /**控件大小 */
  size?: SizeType;
}
withDefaults(defineProps<Props>(), {
  multiple: false,
});
const emit = defineEmits(["update:value", "bring"]);
const { t } = useI18n();
</script>
